<script setup lang="ts">
import { onMounted, getCurrentInstance, watch } from "vue";
import HasChat from "../../components/HasChat.vue";
import store from "../../store/index";
provide: {
  store;
}
const railStyle = ({ focused, checked }) => {
  const style = {
    background: "",
    boxShadow: "",
  };
  if (checked) {
    style.background = "#18A058";
    if (focused) {
      style.boxShadow = "0 0 0 2px #18A058";
    }
  } else {
    style.background = "#888";
    if (focused) {
      style.boxShadow = "0 0 0 2px #888";
    }
  }
  return style;
};
watch(
  () => store.state.openMusic,
  (newVal, oldVal) => {
    if (newVal) {
      store.state.tipMusic = document.getElementById("tipMusic");
    }
  }
);
</script>

<template>
  <!--接收信息提示音-->
  <audio id="tipMusic">
    <source src="../../assets/mp3/msgTip.mp3" type="audio/mp3" />
  </audio>
  <n-switch
    class="music-btn"
    :rail-style="railStyle"
    v-model:value="store.state.openMusic"
  >
    <template #checked>不会错过重要提醒啦</template>
    <template #unchecked>开启声音提醒</template>
  </n-switch>
  <div class="main">
    <div class="content">
      <has-chat></has-chat>
    </div>
  </div>
</template>

<style  scoped lang="less">
.music-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}
.main {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  background-color: @primary-bgcolor;
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 1200px;
    height: 660px;
    border-radius: 33px;
    background: @primary-bgcolor;
    box-shadow: 8px 8px 25px @primary-bgcolor, -8px -8px 25px @boxshow-color3;
    overflow: hidden;
  }
}
</style>
